<template>
  <div id="app">
    <header :class="{'header-fixed' : headerFixed}">

      <el-row>
        <el-col :span="24">
          <!--头部菜单-->
          <el-menu :default-active="activeIndex2" class="header-menu" mode="horizontal" @select="handleSelect" :router="true">
            <el-submenu index="1">
              <template slot="title">新建</template>
              <el-menu-item v-for="(item,index) in newMenus" :key="item.id" :index="newMenus[index][1]">{{ newMenus[index][0] }}</el-menu-item>
            </el-submenu>
          </el-menu>

        </el-col>

      </el-row>
    </header>

    <!--头部—内容分割线-->
    <div v-show="headerFixed" style="position: relative;height: 60px;width: 100%;"></div>
      
    <!--主内容-->
    <main>
      <div id="main-left">
        <el-row class="tac">
          <el-col :span="24">
            <h5>{{ menu }}</h5>
            <!--左侧菜单-->
            <el-menu class="left-menu" default-active="/" @open="handleOpen" @close="handleClose" :router="true">
              <el-menu-item v-for="(menu,index) in leftMenus" :key="menu.id" @click="changeRoute" :index="leftMenus[index][1]">{{ leftMenus[index][0] }}</el-menu-item>
              <el-menu-item :key="menu.id" @click="logout" index="logoutnow">退出登录</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>

      <div id="main-right">
        <el-row>
          <el-col>
            <!--主内容标题-->
            <div v-if="current != '' && current != null">{{ current }}</div>
          </el-col>
        </el-row>
        <!--主内容路由视图-->
        <transition name="fade" mode="out-in">
          <router-view class="view"></router-view>
        </transition>
      </div>
    </main>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data: function () {
      return {
        menu: '控制台',
        current: '',
        leftMenus: [
          ['仪表盘', '/dashboard'],
          ['订单信息', '/order'],
          ['优惠券', '/ticket'],
          ['图片内容', '/image'],
          ['意见反馈', '/feedback'],
          ['公告', '/notice'],
          ['包月会员', '/month'],
          ['定制会员', '/vip'],
          ['用户信息', '/user']
        ],
        newMenus: [
          ['图片内容', '/image/addimg']
          // ['下单配置', '/pot']
        ],
        active: true,
        headerFixed: true,
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      },
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      changeRoute (event) {
        this.current = event.$el.innerHtml
      },
      logout () {
        var storage = window.localStorage
        storage.removeItem('admin')
        storage.removeItem('token')
        this.$router.push('/login')
      }
    }
  }
</script>
